
<template>  

  <div>  
    <!-- top -->
        <x-header title="我的团队" :right-options="{showMore: true}" @on-click-more="show = true"></x-header> 

    <div class="vip_top">
      <div class="vip_img">
        <img  src="static/bottom/youhaodu.png">  
      </div>
          <div class="span_font1"><span>嘉福祥</span></div>
          <div class="span_font2"><span>您是嘉福祥的天使会员</span></div>
    </div>

    <!-- 我得团队 -->
  <div class="my_team">
    <span>我的团队</span>
    <div class="my_team_img"><img src="static/bottom/fanhui.png"  alt=""></div>
  </div> 

      <!-- vip牌 -->
      <div class="my_vip">
        <div class="jin_vip"><span>金钻会员</span></div>
        <div class="yin_vip"><span>银钻会员</span></div>
      </div>

      <!-- team li -->
<div style="clear:both;"></div>
      <div class="team_li">
            <flexbox>
              <flexbox-item>
                <div class="flex-demo">
                  <img src="static/bottom/youhaodu.png" alt="">
                  <div class="team_li_name">
                    <span>嘉福祥</span>
                  </div>
                </div>
                </flexbox-item>
              <flexbox-item>
                <div class="flex-demo">
                  <div class="youhaodu_div">
                    <div> <img  src="static/bottom/youhaodu.png" alt=""></div>
                   
                    <div>
                      <div><span>友好度</span></div>
                      <div><span>99%</span></div>
                    </div>
                  </div>
                </div>
              </flexbox-item>
              <flexbox-item>
                <div class="flex-demo">
                    <div class="left_div">
                      <img src="static/bottom/hetaliaotian.png" alt="">
                    </div>
                </div>
              </flexbox-item>
           </flexbox>
      </div>
      
  </div> 

</template>  

<script>
import { Flexbox, FlexboxItem, Divider,XHeader } from 'vux'
export default {
  components: {
    Flexbox,
    FlexboxItem,
    Divider,
    XHeader
  }
}
</script>  

<style lang="">


  .vip_top{
    width:100%;
    height:8.8125rem;

    background:#ffffff;
  }
  .vip_img{
        padding-top:1rem; 
    margin-left:calc(50% -  1.7rem);
  }
  .vip_img img{
    
    width: 3.8125rem;
  }
  .span_font1,.span_font2{
    text-align: center;
  }
  .span_font1{
    font-size: .9375rem;
    color: #333333;
  }
    .span_font2{
    font-size: .625rem;
    color: #666666;
  }
  .my_team{
    height: 1.3125rem;
    margin: .375rem .25rem .375rem .25rem;
    padding-left:calc(50% - 1.6rem); 
    border-radius: 5px;
    font-size: .625rem;
    /* text-align: center; */
    background: #ffffff;
  }
  .my_team_img{
      float: right;
      color: #333333;
  }
  .my_team_img img{
      width: .8125rem;
      height: .4375rem;
      margin-right: .6875rem;
  }
  .my_vip{
    margin: .3125rem 0px .3125rem .2125rem;
  }
  .jin_vip{
    background: linear-gradient(to right, #48E1CA,#48B9E1); /* 标准的语法（必须放在最后） */
  }
  .yin_vip{
    background: linear-gradient(to left, #48E1CA,#48B9E1); /* 标准的语法（必须放在最后） */
  }
  .jin_vip,.yin_vip{
    margin: .3125rem;
    float: left;
    width: 47%;
    height: 3.8125rem;
    border-radius:.625rem ;
    font-size: .9375rem;
    color: white;
    text-align: center;
    line-height: 3.8125rem;
  }
  .flex-demo {
  height: 4.75rem;
  text-align: center;
  color: #333333;
  /* background-colo; */
  border-radius: 4px;
  /* background-clip: padding-box; */
}

  .team_li{
    margin:.375rem; 
    background: #ffffff;
    border-radius:5px; 
    margin-top: .3125rem;
  }
  .team_li img{
    width: 2.875rem;
    margin-top: .3125rem;
  }
  .team_li_name{
    font-size: .625rem;
  }
  .youhaodu_div>div{
    float: left;
    font-size: .625rem;
    padding-top: 1.1325rem;
    padding-left: 0.5rem;
  }
  .youhaodu_div img{
      width: 2.0625rem;
  }
  .left_div img{
      width: 1.9375rem;
      margin-top:1.3rem ;
      margin-left: 4.5rem;
  }
</style>